<template>
    <div class="app-container">
        <div style="text-align: right;margin-bottom: 15px">
            <el-button type="danger" @click="sync_qiwei_clerk">同步企业微信成员</el-button>
            <el-button type="danger" @click="sync_qiwei_department">同步企业微信部门</el-button>
        </div>
        <div>
            <div style="width: 300px;float:left;height: 100%">
                <div v-for="(department0, index0) in department_list" :key="index0">
                    <div class="department0" @click="chooseDepartment(department0)">
                        <div style="float:left" class="name0">
                            {{ department0.name ? department0.name : '待完善'}}
                        </div>
                        <Op :department="department0" @editDepartment="editDepartment" />
                    </div>
                    <div v-for="(department1, index1) in department0.children" :key="index1">
                        <div class="department1" @click="chooseDepartment(department1)">
                            <div style="float:left" class="name1">
                                {{ department1.name ? department1.name : '待完善'}}
                            </div>
                            <Op :department="department1" @editDepartment="editDepartment" />
                        </div>
                    </div>
                </div>
            </div>
            <div style="height: 100%;margin-left: 300px">
                <Clerk :departmentId="cur_department_id" />
            </div>
        </div>
        <div style="clear: both"></div>
    </div>
</template>

<script>
import { list } from '@/scrm/api/department/department'
import { sync as sync_qiwei_clerk } from '@/scrm/api/qiwei/clerk'
import { sync as sync_qiwei_department } from '@/scrm/api/qiwei/department'

import Op from './components/Op'
import Clerk from './components/Clerk'

export default {
    components: { Op, Clerk, Clerk },
    data() {
        return {
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            department_list: [],
            cur_department_id: 0
        }
    },
    created() {
        this.initData()
    },
    methods: {
        transListToTreeData(list, RootValue) {
            let arr = [];
            list.forEach((item) => {
                //如果数据对象的pid为 '' 说明数据为根节点
                if (item.parentid === RootValue) {
                    let children = this.transListToTreeData(list, item.qw_id); //寻找id等于该对象pid的数据，为它的子节点,返回一个数组
                    if (children.length) {
                        item.children = children; //往对象添加一个children属性，属性值为一个数组
                    }
                    arr.push(item);
                }
            });
            return arr;
        },
        initData() {
            list().then(res => {
                this.department_list = this.transListToTreeData(res.data.items, 0)
                if (this.cur_department_id == 0 && this.department_list.length > 0) {
                    this.cur_department_id = this.department_list[0].id
                }
            })
        },
        sync_qiwei_department() {
            sync_qiwei_department().then(res => {
                if (res.errorCode == 200) {
                    this.$notify({
                        title: '成功',
                        message: '部门同步成功',
                        type: 'success',
                        duration: 2000
                    })
                    this.initData()
                } else {
                    this.$notify({
                        title: '失败',
                        message: '部门同步失败',
                        type: 'error',
                        duration: 2000
                    })
                }
            })
        },
        editDepartment(e) {
            this.initData()
        },
        chooseDepartment(department) {
            this.cur_department_id = department.id
        },
        sync_qiwei_clerk() {
            sync_qiwei_clerk().then(res => {
                if (res.errorCode == 200) {
                    this.$notify({
                        title: '成功',
                        message: '成员同步成功',
                        type: 'success',
                        duration: 2000
                    })
                    this.initData()
                } else {
                    this.$notify({
                        title: '失败',
                        message: '成员同步失败',
                        type: 'error',
                        duration: 2000
                    })
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.department0 {
    background-color: #e8e8e8;
    height: 40px;
    line-height: 40px;
    cursor: pointer;

    .name0 {
        float: left;
        padding-left: 10px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

.department1 {
    background-color: #f3f3f3;
    height: 40px;
    line-height: 40px;
    cursor: pointer;

    .name1 {
        float: left;
        padding-left: 30px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}
</style>